<template>
    <div class="">
        <!-- 头部导航栏 -->
        <div class="head">
            <h3>食谱秀网</h3>
            <svg class="icon icon-caidan" aria-hidden="true" @click="show = !show">
                <use xlink:href="#icon-caidan"></use>
            </svg>
            <!-- 头部隐藏栏 -->
            <transition name="fade">
                <ul class="tab" v-if="!show">
                    <router-link to="/index">
                        <li>
                            <span>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-icons_statistics"></use>
                                </svg>
                                首页
                            </span>
                        </li>
                    </router-link>
                    <router-link to="/classify">
                        <li>
                            <span>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-tag"></use>
                                </svg>
                                食材分类
                            </span>
                        </li>
                    </router-link>
                    <router-link to="/Cookbook">
                        <li>
                            <span>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-tag"></use>
                                </svg>
                                菜谱大全
                            </span>
                        </li>
                    </router-link>
                    <router-link to="/HomeCooked">
                        <li>
                            <span>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-tag"></use>
                                </svg>
                                家常菜谱
                            </span>
                        </li>
                    </router-link>
                    <router-link to="/restriction">
                        <li>
                            <span>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-star"></use>
                                </svg>
                                食物相克
                            </span>
                        </li>
                    </router-link>
                    <router-link to="/PregnantDiet">
                        <li>
                            <span>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-tag"></use>
                                </svg>
                                孕妇食谱
                            </span>
                        </li>
                    </router-link>
                    <router-link to="/FoodInformation">
                        <li>
                            <span>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-tag"></use>
                                </svg>
                                美食资讯
                            </span>
                        </li>
                    </router-link>
                </ul>
            </transition>
            <!-- 侧边栏 -->
            <div class="aside">
                <div class="phone" v-show="true">
                    <router-link  to="/appdownloads">
                        <img src="../../assets/images/QR code/float-icon3.png" alt="">
                    </router-link>
                </div>
                <div class="up" @click="backTop" v-show="backTopShow">
                    <img src="../../assets/images/QR code/float-icon1.png" alt="">
                </div>
            </div>
        </div>
        <!-- 搜索 -->
        <div class="sousuo">
            <svg class="icon icon-fangdajing" aria-hidden="true">
                <use xlink:href="#icon-fangdajing1"></use>
            </svg>
            <input type="text" class="sousuo1" placeholder="搜索菜谱、食材或功效">
            <router-link to="/search">
                <input type="submit"  class="sousuo2" value="搜索">
            </router-link>
        </div>
        <!-- 主体做法 -->
        <div class="content">
            <div class="top">
                <p style="color: #404040;"><b>夏季养生汤煲汤食谱大全</b></p>
                <span>已有169666人围观</span>
                <span>日期:2015-06-18</span>
                <span>来源：<b style="color: #333333;">食谱秀</b></span>
            </div>
            <div class="top1">
                <p>
                    <strong>夏季喝什么汤好</strong>
                    ?现在正值盛夏时节，天气更加炎热了，高温天气常常让人受不了，不妨多喝夏季清热解毒汤。
                    今天小编为您介绍8道夏季清热解毒汤的做法，常喝这些汤可以帮你赶走炎热、预防中暑!
                    不妨来看看它们的做法吧。
                </p>
                <p class="top2">
                    <img src="../../assets/images/reading/20150618202824_19275.jpg" alt="">
                </p>
                <p>
                    <strong>夏季养生汤煲汤食谱</strong>
                </p>
                <p>
                    <strong>1、苦瓜排骨汤</strong>
                </p>
                <p>
                    <strong>材料：</strong>
                    苦瓜500克，排骨400克，葱段、姜片、绍酒、盐、味精适量。
                </p>
                <p>
                    <strong>功效：</strong>
                    苦瓜有清热解毒，明目，补气益精，止渴消暑的功效。
                    苦瓜排骨汤气味苦甘、清润，具清暑除热、明目解毒的功效，是夏季清热降火佳品。
                </p>
                <p>
                    <strong>2、苦瓜青滚咸蛋汤</strong>
                </p>
                <p>
                    <strong>材料：</strong>
                    咸鸭蛋2个、苦瓜600克、生姜4片切丝状。
                </p>
                <p>
                    <strong>做法：</strong>
                    咸鸭蛋去壳留蛋液，取蛋黄切碎;苦瓜洗净，薄薄削去瓜皮，再薄薄削出青嫩部分的瓜肉，
                    并成条丝形状。在镬中加入清水1250毫升(约5碗量)和姜丝，武火滚沸后，
                    下咸蛋黄碎、瓜青至刚熟，下盐、油，再徐徐推入蛋液至均匀便可。
                </p>
                <p>
                    <strong>功效：</strong>
                    苦瓜味苦，有清心开胃的效果。
                    咸鸭蛋能清肺火、降阴火。合而为汤，甘香清润可口，有清热下火、养阴生津的功效。
                </p>
                <p>
                    <strong>3、柴鱼节瓜瘦肉汤</strong>
                </p>
                <p>
                    <strong>材料：</strong>
                    柴鱼(干货店有售)100克、节瓜500克、猪瘦肉150克、生姜3片。
                </p>
                <p>
                    <strong>做法：</strong>
                    柴鱼浸泡40分钟以上，洗净;节瓜刮去茸毛和皮，洗净，切片;猪瘦肉洗净，切薄片，
                    用少许生粉、生抽、生油拌腌片刻。柴鱼、姜置镬中并加入清水1500毫升(约6碗量)武火滚沸10分钟，
                    加入节瓜再滚10分钟，加入瘦肉滚熟，调入适量食盐和生油便可。
                </p>
                <p>
                    <strong>功效：</strong>
                    柴鱼有健脾胃、益阴血之功。而节瓜则是有名的消暑热之瓜蔬。
                </p>
                <p>
                    <strong>4、槐花白茅根煲</strong>
                </p>
                <p>
                    <strong>材料：</strong>
                    槐花15~20克、鲜白茅根50~100克、鲫鱼1条、瘦肉50克、生姜3片。
                </p>
                <p>
                    <strong>做法：</strong>
                    槐花稍浸泡;白茅根洗净;鲫鱼宰洗净，煎至微黄，溅入少许热水。
                    一起与瘦肉、生姜下瓦煲，加入清水2000毫升(约8碗量)，
                    武火滚沸后改文火煲约1小时，下盐便可。为3~4人量。
                </p>
                <p>
                    <strong>功效：</strong>
                    槐花有凉血止血、清肝泻火的功效。以它配上清热泻火的白茅根煲鲫鱼，
                    具有清热凉血、泻火解毒的作用，尤为适用于时下痔疮易发炎的辅助治疗，
                    亦可谓夏日时清热下火的家庭汤饮。
                </p>
                <p>
                    <strong>5、木棉花薏米猪骨汤</strong>
                </p>
                <p>
                    <strong>材料：</strong>
                    木棉花50克、薏米20克、扁豆30克、猪骨500克、陈皮1角、蜜枣2粒、姜3片。
                </p>
                <p>
                    <strong>做法：</strong>
                    各物洗净，猪骨斩块汆水捞起;把适量的水倒入瓦煲，
                    煮开后放以上材料煲2小时左右，下盐调味。
                </p>
                <p>
                    <strong>功效：</strong>
                    木棉花有清热利尿、解毒祛暑和止血的功效。薏米性味甘淡微寒，有利水消肿、
                    健脾去湿、舒筋除痹、清热排脓等功效，为常用的利水渗湿药。
                </p>
                <p>
                    <strong>6、黄瓜皮蛋汤</strong>
                </p>
                <p>
                    <strong>材料：</strong>
                    黄瓜一根，无铅皮蛋一个，姜末、葱花、盐少许。
                </p>
                <p>
                    <strong>做法：</strong>
                    将黄瓜去皮后切成块;皮蛋洗净后切成块备用;锅中放油，7成热后放入姜末、皮蛋，
                    将皮蛋煎成金黄色。放入黄瓜翻炒，加入开水，大火烧开。放入盐调味，
                    待汤色变白后就可起锅。撒上葱花味道更加鲜美哦。
                </p>
                <p>
                    <strong>功效：</strong>
                    黄瓜具有清热、解渴、利尿的功效，而皮蛋则有解疮毒、痘毒的作用，
                    所以此汤清热解毒，适合夏季养生食用，但因皮蛋碱性过大，所以食用不可过量。
                </p>
                <p>
                    <strong>7、枸杞头鸡骨草猪骨汤</strong>
                </p>
                <p>
                    <strong>材料：</strong>
                    干枸杞头50克、鸡骨草50克、粉葛200克、云苓20克、蜜枣2个、猪骨500克、姜2片，盐少许。
                </p>
                <p>
                    <strong>做法：</strong>
                    将干枸杞头、鸡骨草、云苓和蜜枣洗净，粉葛去皮切块，猪骨洗洗净切成块，汆水捞起;
                    烧开水，放入全部材料;大火煮沸后转小火炖一个半小时;下盐调味即可饮用。
                </p>
                <p>
                    <strong>功效：</strong>
                    清肝明目、清热祛湿。
                </p>
                <p>
                    <strong>8、老黄瓜扁豆赤小豆排骨汤</strong>
                </p>
                <p>
                    <strong>材料：</strong>
                    老黄瓜一个，扁豆、赤小豆各一两，排骨一条，陈皮一小块，生姜两片。
                </p>
                <p>
                    <strong>做法：</strong>
                    老黄瓜洗净连皮切成大件，保留瓜瓤瓜仁;扁豆和赤小豆洗净后用清水浸泡半小时，
                    陈皮用清水泡软，刮去白瓤;排骨洗净切块，汆水捞起;适量清水倒入瓦煲烧开，
                    放入所有材料煮沸，转文火煲一个半小时，下盐调味饮用。
                </p>
                <p>
                    <strong>功效：</strong>
                    老黄瓜清热解渴利尿。赤小豆利小便去水肿，除烦热，止渴，解酒湿等。
                    扁豆可健脾和中，除湿热。排骨补气益血，增加钙质。
                </p>
            </div>
        </div>
        <!-- 推荐部分 -->
        <div class="recommend">
            <li v-for="(item,index) in recommend" :key="index">
                <router-link to="/index">
                    <img :src="item.src" alt="">
                    <p>{{item.explanation}}</p>
                </router-link>
            </li>
        </div>
        <!-- 推荐阅读 -->
        <h3 class="title">推荐阅读</h3>
        <ul class="reading">
            <li v-for="(item,index) in reading.slice(0,5)" :key="index">
                <router-link to="/Cookbook">
                    <img :src="item.src" alt="">
                    <h4>{{item.title}}</h4>
                    <p>{{item.content}}
                        <span>{{item.date}}</span>
                    </p>
                </router-link>
            </li>
        </ul>
        <!-- 猜你喜欢 -->
        <h3 class="title tips">猜你喜欢</h3>
        <ul class="foods">
            <li v-for="(item,index) in recipe.slice(0,5)" :key="index">
                <router-link to="/spicy">
                    <img :src="item.src" alt="">
                    <p>{{item.dish}}</p>
                </router-link>
            </li>
        </ul>
        <!-- 底部 -->
        <div class="foot">
            Copyright 食谱秀 m.shipuxiu.com <br>
            <p> 
                官方微信号: <span style="color: #ff0000;">chaoliu1588 </span> 
                <router-link to="https://m.shipuxiu.com/fenlei/">食谱分类</router-link>
                <router-link to="https://support.qq.com/products/113359/">我要吐槽</router-link>
                <router-link to="https://new.cnzz.com/v1/login.php?siteid=5433565">站长统计 </router-link>
             </p> 
        </div>
    </div>
    
</template>
<script>
export default {
    data(){
        return{
            show:true,
            reading:[],
            backTopShow:false,
            recommend:[],
            recipe:[]
        }
    },
    mounted(){
        // 获取数据
        this.$http.get('../../data/data.json')
        .then((response)=> {
            this.reading = response.data.reading
            this.recommend = response.data.recommend
            this.recipe = response.data.recipe
        })
        .catch(function (error) {
            console.log(error);
        })
        .then(function () {
            // always executed
        });
        window.addEventListener('scroll', this.handleScroll)
    },
    methods: {
         backTop(){
            let back = setInterval(() =>{
                 if(document.body.scrollTop||document.documentElement.scrollTop){
                    document.body.scrollTop -= 100;
                    document.documentElement.scrollTop -= 100;
                }else{
                    clearInterval(back)
                }
            });
        },
        handleScroll(){
             if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
                 this.backTopShow = true;
            }else{
                 this.backTopShow = false;
            }
        }
    }
}
</script>

<style scoped>
    /* 推荐阅读 */
    .reading{
        margin-top: 10px;
        width: 100%;
    }
    .reading li:nth-of-type(1){
        border-top: 2px solid #e8e8e8;
    }
    .reading li{
        width: 100%;
        height: 9vh;
        border-top: 1px solid #e8e8e8;
        padding-top: 16px;
    }
    .reading li img{
        width: 22vw;
        height: 8vh;
        float: left;
    }
    .reading li h4{
        display: block;
        width: 73vw;
        height: 3vh;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        font-size: 16px;
        color: #000000;
        float: right;
        padding-right: 10px;
    }
    .reading li p{
        color: #7b7b7b;
        font-size: 12px;
        float: left;
        width: 70vw;
        height: 12vh;
        padding-left: 10px;
        padding-top: 5px;
    }
    .reading li p span{
        float: right;
    }
    .title{
        margin-top: 30px;
        margin-left: 15px;
        color: #ff1c1c;
    }
    /* 主体做法 */
    .top p,.top span{
        text-align: center;
        margin-top: 15px;
    }
    .top span{
        font-size: 12px;
        color: #acacac;
        margin: 22px;
    }
    .top1{
        line-height: 4vh;
        font-size: 17px;
        margin: 20px 10px 0px 15px;
        color: #333333;
    }
    .top1 p{
       text-indent: 2em; 
       margin-top: 10px;
    }
    .top2 img{
        width: 100%;
        height: 33vh;
        margin: 10px -35px;
    }
    .top1 strong{
        font-weight: 800;
    }
    .recommend{
        margin-top: -40px;
        background: #ffffff;
        height: 19vh;
    }
    .foods{
        margin-top: 10px;
        width: 100%;
        height: 60vh;
        border-top: 2px solid #efefef;
    }
    .foods li{
        width: 45%;
        height: 5vh;
        margin-top: 15px;
    }
    .foods li img{
        width: 82%;
        height: 14vh;
        margin-left: 20px;
    }
    .foods li p{
        font-size: 14px;
        text-align: center;
        color: #333333;
    }
    .tips{
        padding-top: 10px;
        margin-top: 10px;
        border-top: 1px solid #f0f0f0;
    }
</style>